
import React from 'react'
import PropTypes from 'prop-types';
import Router from 'next/router'
import HomeCase from "../homeCase";
export default class News extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    static getDerivedStateFromProps(nextProps){
        let homeArticleData = nextProps.homeArticleData
            return {
            homeArticleData
        }
    }
    render(){
        return (
            <div className='home_news'>
                <div className='news_top'>
                    <img className='news_top_img' src="/static/indexImg/rule@2x.png" alt=""/>
                    <span>新闻中心</span>
                   <span className='fr' onClick={() => {Router.push('/newsCenter')}} >查看更多</span>
                </div>
                <ul className='news_list'>
                    {
                        this.state.homeArticleData &&
                        // 截取新闻列表前三条数据并循环
                        this.state.homeArticleData.slice(0,3).map(item => {
                            return (
                                <li className='news_item' key={item.id} onClick={this.goToNewsDetails.bind(this,item.id)}>
                                    <div className='item_fl'>
                                        <h2 className='item_fl_tit'>{item.title}</h2>
                                        <div className='item_fl_time'>
                                            <span>{item.auth}</span>
                                            <span>{item.create_time}</span>
                                        </div>
                                    </div>
                                    <img className='item_fr_img' src={item.img} alt=""/>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
    goToNewsDetails(id){
        Router.push({pathname:'/newsCenter/newsDetail', query:{id}})
    }
}
News.propTypes = {
    homeArticleData: PropTypes.array
}